/**鼠标事件
 * @ 标  识: hchhIOT
 * @ 作  者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
 */
/* ================================================================================================ */
// 🍀引入
/* ================================================================================================ */
import * as d3 from "d3"
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 图元端函数引入
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import {
  onSetPelData,
  onUpdataHtml,
  onCalcCursor,//计算光标点
  onActionDownNavigation,//激活下框导航
  onGetKeyBySelectRange,//根据选择区域获取图元键
  onDynamicShowPel,
  onPelMove,
  onPelCopy,
  // 🌱 创建图元
  onCreateLine,             // 线
  onCreateCircle,           // 圆
  onCreateEllipse,          // 椭圆
  onCreateArc,              // 圆弧
  onCreateCirclePolygon,    // 圆分多边形
  onCreateRectangle,        // 矩形
  onCreateSvgText,          // Svg文本
  onCreateDIVText,          // DIV文本
  onCreateDIVImage,         // svg图片
  onCreateDIVBlock,         // 块
} from "@/functions"

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 图元端定义引入
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import { CoordinateType } from "@/defines"

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 引入存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import { useMenuStore } from "@/store/menuStore"; // 菜单
import { useCanvasStore } from "@/store/canvasStore"  // 画布
import { useWorkStore } from "@/store/workStore"; // 工作数据

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 使用存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
const menuStore = useMenuStore(); // 菜单
const canvasStore = useCanvasStore()    // 画布
const workStore = useWorkStore(); // 设备数据
/* ================================================================================================ */
//                                全局函数
/* ================================================================================================ */
/** 鼠标按下事件 */
export const onCanvasMouseDown = (e: MouseEvent) => {
  // console.log("♌_鼠标按下事件");
  // console.log(e.button);

  // e.preventDefault();
  /**◆ 计算光标点 */
  onCalcCursor(e.offsetX, e.offsetY);
  /**◆ 真实坐标 */
  let coordinate: CoordinateType = JSON.parse(JSON.stringify(canvasStore.coordinate))
  let workState = canvasStore.workState;

  if (e.button === 2) {
    console.log("画布平移")

  }

  if (workState === 10/*选择*/) {
    canvasStore.recordPoint = [] //清理记录点
    canvasStore.recordPoint.push(coordinate)// 记录鼠标位置
  }
  if (workState === 20 /*绘图*/) {
    // console.log("绘图");
    onActionDownNavigation("DownCanvas"); //激活下框导航
    /** 绘制-鼠标按下-创建图元参数 */
    onMouseDownBaseInfo(coordinate);
  }
  if (workState === 30 /*编辑*/) { }
  if (workState === 40/*移动*/) {
    canvasStore.recordPoint.push(coordinate)// 记录鼠标位置
    if (canvasStore.recordPoint.length === 1) {
      //创建显示绘制_水平线
      d3.select("#DrawShowLayer")
        .append("g")
        .attr("id", "DynamicShowPel")
        .append("line");
    }
    if (canvasStore.recordPoint.length === 2) {
      onPelMove()
    }
  }
  if (workState === 50/*复制*/) {
    canvasStore.recordPoint.push(coordinate)// 记录鼠标位置
    if (canvasStore.recordPoint.length === 1) {
      //创建显示绘制_水平线
      d3.select("#DrawShowLayer")
        .append("g")
        .attr("id", "DynamicShowPel")
        .append("line");
    }
    if (canvasStore.recordPoint.length === 2) {
      onPelCopy()
    }
  }
  if (workState === 70/*获取平移坐标*/) {
    canvasStore.recordPoint.push(coordinate)// 记录鼠标位置
    if (canvasStore.recordPoint.length === 1) {
      //创建显示绘制_水平线
      d3.select("#DrawShowLayer")
        .append("g")
        .attr("id", "DynamicShowPel")
        .append("line");
    }
    if (canvasStore.recordPoint.length === 2) {
      /** 动画参数状态-动画键 */
      let Key = String(canvasStore.animatKey);
      canvasStore.selectedPel.animations[Key].path_val[0].x = JSON.parse(JSON.stringify(canvasStore.recordPoint[0].x));
      canvasStore.selectedPel.animations[Key].path_val[0].y = JSON.parse(JSON.stringify(canvasStore.recordPoint[0].y));
      canvasStore.selectedPel.animations[Key].path_val[1].x = JSON.parse(JSON.stringify(canvasStore.recordPoint[1].x));
      canvasStore.selectedPel.animations[Key].path_val[1].y = JSON.parse(JSON.stringify(canvasStore.recordPoint[1].y));
      canvasStore.workState = 0;
      /**  删除显示 */
      d3.select("#DynamicShowPel").remove()
      canvasStore.recordPoint = [] //清理记录点

    }
  }
  //🚩 ★ 设置选择
  if (workState === 0/*无*/) {
    menuStore.menuHandle('PelEditSelect')
    canvasStore.workState = 10
    canvasStore.recordPoint = [] //清理记录点
    canvasStore.recordPoint.push(coordinate)// 记录鼠标位置
  }

};

/** 鼠标抬起事件 */
export const onCanvasMouseUp = (e: MouseEvent) => {
  // console.log("♌_鼠标抬起事件")
  e.preventDefault()
  /**◆ 计算光标点 */
  onCalcCursor(e.offsetX, e.offsetY);
  /**◆ 坐标 */
  let coordinate: CoordinateType = JSON.parse(JSON.stringify(canvasStore.coordinate))
  //🚩 ★ 选择
  if (canvasStore.workState === 10/*选择*/) {
    // 🦢 -----------------------------| ★ ★ 获取选择区域
    canvasStore.recordPoint.push(coordinate)// 记录鼠标位置 
    canvasStore.selectRange = JSON.parse(JSON.stringify(canvasStore.recordPoint))
    canvasStore.selectKeys = []// 清空选择键
    // 🦢 -----------------------------| ★ ★ 根据选择区域获取图元键
    onGetKeyBySelectRange()//根据选择区域获取图元键
  }
};

/** 鼠标移动事件 */
export const onCanvasMouseMove = (e: MouseEvent) => {
  // console.log("♌_鼠标移动事件");
  e.preventDefault();
  /**◆ 计算光标点 */
  onCalcCursor(e.offsetX, e.offsetY);
  /**◆ 坐标 */
  let coordinate = JSON.parse(JSON.stringify(canvasStore.coordinate));
  let workState = canvasStore.workState
  //🚩 ★ 选择
  if (workState === 10/*选择*/) {
    //★ 鼠标移动-设置_画框模式
    if (canvasStore.recordPoint.length === 1) {
      // console.log("★ 鼠标移动-设置_画框模式");
      //★ ★ ★ 计算矩形 差值
      /** 差值X */
      let DifferenceX = coordinate.x - canvasStore.recordPoint[0].x;
      /** 差值Y */
      let DifferenceY = coordinate.y - canvasStore.recordPoint[0].y;
      // // console.log(` 差值X==${DifferenceX};\n 差值Y==${DifferenceY}`);

      //★ 计算矩形 长 ；宽 ；
      /*矩形宽度*/
      canvasStore.selectRect.RectWidth = Math.abs(DifferenceX);
      /*矩形高度*/
      canvasStore.selectRect.RectHeight = Math.abs(DifferenceY);
      // // console.log(` 矩形宽度==${RectWidth};\n 矩形高度==${RectHeight}`);

      //★ 计算矩形 基点；

      /*★ ★ ★ 基点X*/
      if (DifferenceX > 0) {
        canvasStore.selectRect.BasePointX = canvasStore.recordPoint[0].x;
      } else {
        canvasStore.selectRect.BasePointX = coordinate.x;
      }

      /*★ ★ ★ 基点Y*/
      if (DifferenceY > 0) {
        canvasStore.selectRect.BasePointY = canvasStore.recordPoint[0].y;
      } else {
        canvasStore.selectRect.BasePointY = coordinate.y;
      }
      // // console.log(` 基点X==${BasePointX};\n 基点Y==${BasePointY}`);

      /**★ ★ ★ 边框颜色 */
      if (DifferenceX < 0) {
        canvasStore.selectRect.StrokeColor = "#0000ff" //蓝色
        canvasStore.selectRect.Model = 4
      }
      else if (DifferenceY < 0) {
        canvasStore.selectRect.StrokeColor = "#00ff00"; //绿色
        canvasStore.selectRect.Model = 3
      }
    }
  }
  //🚩 ★ 绘图
  if (workState === 20 /*绘图*/) {
    onMouseMoveBaseInfo(coordinate); //绘制-鼠标移动-创建图元参数
  }
  //🚩 ★ 编辑
  if (workState === 30 /*编辑*/) { }
  //🚩 ★ 移动
  if (workState === 40/*移动*/) {
    if (canvasStore.recordPoint.length === 1) {
      d3.select("#DynamicShowPel")
        .select("line")
        .attr("stroke", 'rgb(255,255,255)')
        .attr("stroke-width", '1')
        .attr("stroke-dasharray", '3 3')
        .attr("stroke-linecap", canvasStore.selectedPen.stroke_linecap)
        .attr("opacity", '1')
        .attr("x1", canvasStore.recordPoint[0].x)
        .attr("y1", canvasStore.recordPoint[0].y)
        .attr("x2", coordinate.x)
        .attr("y2", coordinate.y);
    }
  }
  //🚩 ★ 复制
  if (workState === 50/*复制*/) {
    if (canvasStore.recordPoint.length === 1) {
      d3.select("#DynamicShowPel")
        .select("line")
        .attr("stroke", 'rgb(255,255,255)')
        .attr("stroke-width", '1')
        .attr("stroke-dasharray", '3 3')
        .attr("stroke-linecap", canvasStore.selectedPen.stroke_linecap)
        .attr("opacity", '1')
        .attr("x1", canvasStore.recordPoint[0].x)
        .attr("y1", canvasStore.recordPoint[0].y)
        .attr("x2", coordinate.x)
        .attr("y2", coordinate.y);
    }
  }
  //🚩 ★ 复制
  if (workState === 60/*画布平移*/) {
    // console.log("画布平移")

  }
  //🚩 ★ 获取平移坐标
  if (workState === 70/*获取平移坐标*/) {
    if (canvasStore.recordPoint.length === 1) {
      d3.select("#DynamicShowPel")
        .select("line")
        .attr("stroke", 'rgb(255,255,255)')
        .attr("stroke-width", '1')
        .attr("stroke-dasharray", '3 3')
        .attr("stroke-linecap", canvasStore.selectedPen.stroke_linecap)
        .attr("opacity", '1')
        .attr("x1", canvasStore.recordPoint[0].x)
        .attr("y1", canvasStore.recordPoint[0].y)
        .attr("x2", coordinate.x)
        .attr("y2", coordinate.y);
    }
  }
  //🚩 ★ 显示光标
  if (canvasStore.canvasAttr.isShowCursor/*显示光标*/) {
    d3.select("#PanelCanvas").style("cursor", "none");//不显示光标
  }
  //🚩 ★ 不显示光标
  if (!canvasStore.canvasAttr.isShowCursor/*显示光标*/) {
    // console.log("不显示光标");
    if (canvasStore.workState === 0/*选择*/) {
      d3.select("#PanelCanvas").style("cursor", "default");//默认
    }
    if (canvasStore.workState === 10/*选择*/) {
      d3.select("#PanelCanvas").style("cursor", "default");//默认
    }
    if (canvasStore.workState === 20 /*绘图*/) {
      d3.select("#PanelCanvas").style("cursor", "crosshair");//默认
    }
    if (canvasStore.workState === 40/*移动*/) {
      d3.select("#PanelCanvas").style("cursor", "move");//默认
    }
    if (canvasStore.workState === 50/*复制*/) {
      d3.select("#PanelCanvas").style("cursor", "copy");//默认
    }
  }
};

/** 滚轮轮事件 */
export const onCanvasWheel = (e: any) => {
  // console.log("♌_滚轮轮事件");
  // e.preventDefault();
  // console.log(e);
  if (e.wheelDelta > 0) {
    canvasStore.canvasAttr.canvasScale = canvasStore.canvasAttr.canvasScale + 0.05
  }
  if (e.wheelDelta < 0) {
    canvasStore.canvasAttr.canvasScale = canvasStore.canvasAttr.canvasScale - 0.05
  }

}

/** 画布右键抬起 */
export const onRightClick = (e: any) => {
  // console.log("♌_画布平移");
  // console.log(e.button);
  e.preventDefault();
  canvasStore.workState = 0/*无*/
  /**◆ 真实坐标 */
  let coordinate: CoordinateType = JSON.parse(JSON.stringify(canvasStore.coordinate))
  canvasStore.moveCanvasRecord.push(coordinate)// 记录鼠标位置
  // console.log(canvasStore.moveCanvasRecord);
  canvasStore.moveOffsetX = canvasStore.moveCanvasRecord[1].x - canvasStore.moveCanvasRecord[0].x
  canvasStore.moveOffsetY = canvasStore.moveCanvasRecord[1].y - canvasStore.moveCanvasRecord[0].y
  canvasStore.moveCanvasRecord = [];// 
}

/** 创建鼠标事件 */
export const onCreatMouseEvent = () => {
  // console.log("创建鼠标事件")
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 数据转储
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /** 复制图元集 */
  let copyPels = workStore.pels

  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  // 🐸 遍历图元数据
  /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  for (let index = 0; index < copyPels.length; index++) {
    // console.log("遍历图元数据");
    /** 图元Id */
    let pelId = String(copyPels[index].key);
    /** 事件集*/
    let events = copyPels[index].events;

    d3.select(`#${pelId}`)
      .data([events])

      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      // 🐸 01-鼠标移到元素上
      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      .on("mouseover", (e: any, i: any) => {
        // console.log(i)
        if (i.mouseover.enable) {
          // console.log("鼠标移到元素上")

          /** 发送数据集:1-图元数据;2-发送数据 */
          if ((i.mouseover.opt_send_set === 1) && (i.mouseover.link_key !== 'none')) {
            /** 发送数据类型:1_文本;2_颜色 */
            if (i.mouseover.opt_send_type === 1) {
              onSetPelData(i.mouseover.link_key, i.mouseover.send_text);
              onUpdataHtml();
            }
            /** 发送数据类型:1_文本;2_颜色 */
            if (i.opt_send_type === 2) {
              onSetPelData(i.mouseover.link_key, i.mouseover.send_colour);
              onUpdataHtml();
            }
          }
          /** 发送数据集:1-图元数据;2-发送数据 */
          if ((i.mouseover.opt_send_set === 2) && (i.mouseover.link_key !== 'none')) {
            /** 发送数据类型:1_文本*/
            if (i.mouseover.opt_send_type === 1) {
              workStore.sendBuffer.push({
                /** 链接变量 */
                link_key: i.mouseover.link_key,
                /** 发送文本*/
                val: i.mouseover.send_text
              })
            }
          }
        }
      })

      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      // 🐸 02-鼠标从元素上移开
      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      .on("mouseout", (e: any, i: any) => {
        // console.log(i)
        if (i.mouseout.enable) {
          // console.log("鼠标从元素上移开")
          /** 发送数据集:1-图元数据;2-发送数据 */
          if ((i.mouseout.opt_send_set === 1) && (i.mouseout.link_key !== 'none')) {
            /** 发送数据类型:1_文本;2_颜色 */
            if (i.mouseout.opt_send_type === 1) {
              onSetPelData(i.mouseout.link_key, i.mouseout.send_text);
              onUpdataHtml();
            }
            /** 发送数据类型:1_文本;2_颜色 */
            if (i.opt_send_type === 2) {
              onSetPelData(i.mouseout.link_key, i.mouseout.send_colour);
              onUpdataHtml();
            }
          }
          /** 发送数据集:1-图元数据;2-发送数据 */
          if ((i.mouseout.opt_send_set === 2) && (i.mouseout.link_key !== 'none')) {
            /** 发送数据类型:1_文本*/
            if (i.mouseout.opt_send_type === 1) {
              workStore.sendBuffer.push({
                /** 链接变量 */
                link_key: i.mouseout.link_key,
                /** 发送文本*/
                val: i.mouseout.send_text
              })
            }
          }
        }
      })

      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      // 🐸 03-鼠标按下
      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      .on("mousedown", (e: any, i: any) => {
        // console.log(i)
        if (events.mousedown.enable) {
          // console.log("鼠标按下")
          /** 发送数据集:1-图元数据;2-发送数据 */
          if ((i.mousedown.opt_send_set === 1) && (i.mousedown.link_key !== 'none')) {
            /** 发送数据类型:1_文本;2_颜色 */
            if (i.mousedown.opt_send_type === 1) {
              onSetPelData(i.mousedown.link_key, i.mousedown.send_text);
              onUpdataHtml();
            }
            /** 发送数据类型:1_文本;2_颜色 */
            if (i.opt_send_type === 2) {
              onSetPelData(i.mousedown.link_key, i.mousedown.send_colour);
              onUpdataHtml();
            }
          }
          /** 发送数据集:1-图元数据;2-发送数据 */
          if ((i.mousedown.opt_send_set === 2) && (i.mousedown.link_key !== 'none')) {
            /** 发送数据类型:1_文本*/
            if (i.mousedown.opt_send_type === 1) {
              workStore.sendBuffer.push({
                /** 链接变量 */
                link_key: i.mousedown.link_key,
                /** 发送文本*/
                val: i.mousedown.send_text
              })
            }
          }
        }
      })

      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      // 🐸 04-鼠标抬起
      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      .on("mouseup", (e: any, i: any) => {
        if (i.mouseup.enable) {
          // console.log("鼠标抬起")
          // console.log(i)
          /** 发送数据集:1-图元数据;2-发送数据 */
          if ((i.mouseup.opt_send_set === 1) && (i.mouseup.link_key !== 'none')) {
            /** 发送数据类型:1_文本;2_颜色 */
            if (i.mouseup.opt_send_type === 1) {
              onSetPelData(i.mouseup.link_key, i.mouseup.send_text);
              onUpdataHtml();
            }
            /** 发送数据类型:1_文本;2_颜色 */
            if (i.opt_send_type === 2) {
              onSetPelData(i.mouseup.link_key, i.mouseup.send_colour);
              onUpdataHtml();
            }
          }
          /** 发送数据集:1-图元数据;2-发送数据 */
          if ((i.mouseup.opt_send_set === 2) && (i.mouseup.link_key !== 'none')) {
            /** 发送数据类型:1_文本*/
            if (i.mouseup.opt_send_type === 1) {
              workStore.sendBuffer.push({
                /** 链接变量 */
                link_key: i.mouseup.link_key,
                /** 发送文本*/
                val: i.mouseup.send_text
              })
            }
          }
        }
      })

      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      // 🐸 05-鼠标双击
      /**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
      .on("dblclick", (e: any, i: any) => {
        // console.log(i)
        if (i.dblclick.enable) {
          // console.log("鼠标双击")
          /** 发送数据集:1-图元数据;2-发送数据 */
          if ((i.dblclick.opt_send_set === 1) && (i.dblclick.link_key !== 'none')) {
            /** 发送数据类型:1_文本;2_颜色 */
            if (i.dblclick.opt_send_type === 1) {
              onSetPelData(i.dblclick.link_key, i.dblclick.send_text);
              onUpdataHtml();
            }
            /** 发送数据类型:1_文本;2_颜色 */
            if (i.opt_send_type === 2) {
              onSetPelData(i.dblclick.link_key, i.dblclick.send_colour);
              onUpdataHtml();
            }
          }
          /** 发送数据集:1-图元数据;2-发送数据 */
          if ((i.dblclick.opt_send_set === 2) && (i.dblclick.link_key !== 'none')) {
            /** 发送数据类型:1_文本*/
            if (i.dblclick.opt_send_type === 1) {
              workStore.sendBuffer.push({
                /** 链接变量 */
                link_key: i.dblclick.link_key,
                /** 发送文本*/
                val: i.dblclick.send_text
              })
            }
          }
        }
      });

  }
}

/* ================================================================================================ */
//                                局部函数
/* ================================================================================================ */

/** 鼠标按下-创建图元参数
 * @参数_Coordinate      真实坐标
 */
const onMouseDownBaseInfo = (coordinate: CoordinateType) => {
  // console.log("✍ 绘制函数-鼠标按下-创建图元参数");
  /** 图元类型 */
  let PelType = canvasStore.drawPelType;
  /**◆ 绘制 */
  //===========================================|SVG图元
  if (PelType === "horizontaLine"/*水平线*/) {
    // console.log("✍ 绘制函数-鼠标按下-绘制水平线");
    canvasStore.recordPoint.push(coordinate);
    if (canvasStore.recordPoint.length === 1) {
      //创建显示绘制_水平线
      d3.select("#DrawShowLayer")
        .append("g")
        .attr("id", "DynamicShowPel")
        .append("line");
    }
    if (canvasStore.recordPoint.length === 2) {
      onCreateLine();
    }
  }
  if (PelType === "verticalLine"/*垂直线*/) {
    /**◆ 绘制-垂直线 */
    // console.log("绘_垂直线");
    canvasStore.recordPoint.push(coordinate);
    if (canvasStore.recordPoint.length === 1) {
      canvasStore.tips = "绘制 垂直线 指定终点";
      //创建显示绘_垂直线
      d3.select("#DrawShowLayer")
        .append("g")
        .attr("id", "DynamicShowPel")
        .append("line");
    }
    if (canvasStore.recordPoint.length === 2) {
      onCreateLine();
    }
  }
  if (PelType === "slantLine"/*斜线*/) {
    /**◆ 绘制-斜线 */
    // console.log("绘_斜线");
    canvasStore.recordPoint.push(coordinate);
    if (canvasStore.recordPoint.length === 1) {
      //创建显示绘_斜线
      d3.select("#DrawShowLayer")
        .append("g")
        .attr("id", "DynamicShowPel")
        .append("line");
    }
    /** 判断记录点 */
    if (canvasStore.recordPoint.length === 2) {
      onCreateLine();
    }
  }
  if (PelType === "circle"/*圆*/) {
    /**◆ 绘制-圆 */
    // console.log("绘_圆");
    canvasStore.recordPoint.push(coordinate);
    if (canvasStore.recordPoint.length === 1) {
      canvasStore.tips = "绘制 圆 指定圆心";
      //创建显示绘
      d3.select("#DrawShowLayer")
        .append("g")
        .attr("id", "DynamicShowPel")
        .append("circle");
    }
    /** ◆ ◆ 判断-记录点 */
    if (canvasStore.recordPoint.length === 2) {
      onCreateCircle();
    }
  }
  if (PelType === "ellipse"/*椭圆*/) {
    /**◆ 绘制-椭圆 */
    // console.log("绘_椭圆");
    canvasStore.tips = "绘制 椭圆 指定圆心";
    canvasStore.recordPoint.push(coordinate);
    /** 判断-记录点 */
    if (canvasStore.recordPoint.length === 1) {
      canvasStore.tips = "绘制 椭圆 指定圆半径1";
      //创建显示绘
      d3.select("#DrawShowLayer")
        .append("g")
        .attr("id", "DynamicShowCircle")
        .append("circle");
    }
    /** 绘制 椭圆 指定圆半径2 */
    if (canvasStore.recordPoint.length === 2) {
      canvasStore.tips = "绘制 椭圆 指定圆半径2";
      /**  删除显示 */
      d3.select("#DynamicShowCircle").remove();
      d3.select("#DrawShowLayer")
        .append("g")
        .attr("id", "DynamicShowEllipse")
        .append("ellipse");
    }
    /** 判断-记录点 */
    if (canvasStore.recordPoint.length == 3) {
      onCreateEllipse();//创建标签-椭圆
    }
  }
  if (PelType === "arc"/*三点弧线*/) {
    canvasStore.recordPoint.push(coordinate);
    if (canvasStore.recordPoint.length === 1) {
      //创建显示绘制_水平线
      d3.select("#DrawShowLayer")
        .append("g")
        .attr("id", "DynamicShowPel")
        .append("line");
    }
    if (canvasStore.recordPoint.length === 2) {
      canvasStore.tips = "绘制 三点弧线 指定圆半径2";
      /**  删除显示 */
      d3.select("#DynamicShowPel").remove();
      //创建显示绘制_路径
      d3.select("#DrawShowLayer")
        .append("g")
        .attr("id", "DynamicShowPel")
        .append("path");
    }
    if (canvasStore.recordPoint.length == 3) {
      onCreateArc()
    }
  }
  if (PelType === "circlePolygon"/*圆分多边形*/) {
    canvasStore.recordPoint.push(coordinate);
    if (canvasStore.recordPoint.length === 1) {
      //创建显示绘
      d3.select("#DrawShowLayer")
        .append("g")
        .attr("id", "DynamicShowPel")
        .append("circle");
    }
    if (canvasStore.recordPoint.length === 2) {
      // 创建标签-圆分多边形
      onCreateCirclePolygon()
    }
    //
  }
  if (PelType === "rectangle"/*矩形*/) {
    /**◆ 绘制-矩形 */
    // console.log("绘_矩形");
    canvasStore.recordPoint.push(coordinate);
    if (canvasStore.recordPoint.length === 1) {
      //创建显示绘_矩形
      d3.select("#DrawShowLayer")
        .append("g")
        .attr("id", "DynamicShowPel")
        .append("rect");
    }
    if (canvasStore.recordPoint.length === 2) {
      onCreateRectangle();//创建标签-矩形
    }
  }
  if (PelType === "sector"/*扇形*/) { }
  if (PelType === "polygon"/*多边形*/) {
    // console.log("绘_多边形");
    /** 记录光标点 */
    canvasStore.recordPoint.push(coordinate);
    if (canvasStore.recordPoint.length === 1) {
      // 创建-线
      d3.select("#DrawShowLayer")
        .append("g")
        .attr("id", "DynamicShowLine")
        .append("line");
      //创建-路径
      d3.select("#DrawShowLayer")
        .append("g")
        .attr("id", "DynamicShowPath")
        .append("path");
    }
  }
  if (PelType === "polyline"/*折线*/) {
    // console.log("绘_折线");
    /** 记录光标点 */
    canvasStore.recordPoint.push(coordinate);
    if (canvasStore.recordPoint.length === 1) {
      canvasStore.tips = "绘制 折线 指定下一点";
      //创建显示绘
      d3.select("#DrawShowLayer")
        .append("g")
        .attr("id", "DynamicShowLine")
        .append("line");

      d3.select("#DrawShowLayer")
        .append("g")
        .attr("id", "DynamicShowPath")
        .append("path");
    }
  }
  if (PelType === "path"/*路径*/) {
    // console.log("绘_路径");
    /** 记录光标点 */
    canvasStore.recordPoint.push(coordinate);
    if (canvasStore.recordPoint.length === 1) {
      canvasStore.tips = "绘制 路径 指定下一点";
      //创建显示绘
      d3.select("#DrawShowLayer")
        .append("g")
        .attr("id", "DynamicShowLine")
        .append("line");

      d3.select("#DrawShowLayer")
        .append("g")
        .attr("id", "DynamicShowPath")
        .append("path");
    }
  }
  if (PelType === "svgText"/*Svg文本*/) {
    canvasStore.recordPoint.push(coordinate)
    if (canvasStore.recordPoint.length === 1) {
      canvasStore.tips = "绘制 DSvg文本 指定插入点"
      onCreateSvgText()
    }
  }
  if (PelType === "svgImage"/*图片*/) {
    // console.log("绘_图片")
    canvasStore.recordPoint.push(coordinate)
    if (canvasStore.recordPoint.length === 1) {
      canvasStore.tips = "绘制 图片 指定插入点"
      //创建显示绘_矩形
      d3.select("#DrawShowLayer")
        .append("g")
        .attr("id", "DynamicShowPel")
        .append("rect");
    }
    if (canvasStore.recordPoint.length === 2) {
      onCreateDIVImage()//创建标签-图片
    }
  }
  //===========================================|DIV图元
  if (PelType === "divText"/*DIV文本*/) {
    // console.log("绘_DIV文本")
    canvasStore.recordPoint.push(coordinate)
    if (canvasStore.recordPoint.length === 1) {
      canvasStore.tips = "绘制 DIV文本 指定插入点"
      //创建显示绘_矩形
      d3.select("#DrawShowLayer")
        .append("g")
        .attr("id", "DynamicShowPel")
        .append("rect");
    }
    if (canvasStore.recordPoint.length === 2) {
      onCreateDIVText()//创建标签-DIV文本
    }
  }
  if (PelType === "divBlock"/*DIV块*/) {
    canvasStore.recordPoint.push(coordinate)
    if (canvasStore.recordPoint.length === 1) {
      canvasStore.tips = "绘制 块 指定插入点"
      //创建显示绘_矩形
      d3.select("#DrawShowLayer")
        .append("g")
        .attr("id", "DynamicShowPel")
        .append("rect");
    }
    if (canvasStore.recordPoint.length === 2) {
      onCreateDIVBlock()//创建标签-DIV块
    }
  }

}

/** 鼠标移动-创建图元参数
 * @参数_Coordinate 坐标
 */
const onMouseMoveBaseInfo = (coordinate: any) => {
  // console.log("✍ 绘制函数-鼠标移动-创建图元参数");
  /** 图元类型 */
  let PelType = canvasStore.drawPelType;
  /**◆ 绘制 水平线 垂直线 斜线 */
  if (
    PelType === "horizontaLine"/*水平线*/ ||
    PelType === "verticalLine"/*垂直线*/ ||
    PelType === "slantLine"/*斜线*/
  ) {
    if (canvasStore.recordPoint.length === 1) {
      onDynamicShowPel(coordinate); //动态显示线
    }
  }
  if (PelType === "circle"/*圆*/) {
    /**◆ 绘制-圆 */
    if (canvasStore.recordPoint.length === 1) {
      onDynamicShowPel(coordinate); //动态显示线
    }
  }
  if (PelType === "ellipse"/*椭圆*/) {
    /**◆ 绘制-椭圆 */
    /** 绘制 椭圆 半径X */
    if (canvasStore.recordPoint.length === 1) {
      canvasStore.tips = "绘制 椭圆 半径X";
      onDynamicShowPel(coordinate); //动态显示线
    }
    /** 绘制 椭圆 半径Y */
    if (canvasStore.recordPoint.length === 2) {
      canvasStore.tips = "绘制 椭圆 半径Y";
      onDynamicShowPel(coordinate); //动态显示线
    }
  }
  if (PelType === "arc"/*三点弧线*/) {
    if (canvasStore.recordPoint.length === 1) {
      canvasStore.tips = "绘制 三点弧线 指定第2点";
      onDynamicShowPel(coordinate); //动态显示线
    }
    if (canvasStore.recordPoint.length === 2) {
      canvasStore.tips = "绘制 三点弧线 指定第3点";
      onDynamicShowPel(coordinate); //动态显示线
    }
  }
  if (
    PelType === "rectangle"/*矩形*/ ||
    PelType === "divText"/*DIV文本*/ ||
    PelType === "svgImage"/*图片*/ ||
    PelType === "divBlock"/*DIV块*/) {
    if (canvasStore.recordPoint.length === 1) {
      onDynamicShowPel(coordinate); //动态显示线
    }
  }
  if (PelType === "circlePolygon"/*圆分多边形*/) {
    if (canvasStore.recordPoint.length === 1) {
      onDynamicShowPel(coordinate); //动态显示线
    }
  }
  if (PelType === "polygon"/*多边形*/) {
    /**◆ 绘制-多边形 */
    onDynamicShowPel(coordinate); //动态显示线
  }
  if (PelType === "polyline"/*折线*/) {
    /**◆ 绘制-折线 */
    onDynamicShowPel(coordinate); //动态显示线
  }
  if (PelType === "path"/*路径*/) {
    /**◆ 绘制-路径 */
    onDynamicShowPel(coordinate); //动态显示线
  }

}



